<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>播单播放</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="${pageContext.request.contextPath}/css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"  type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/videoplayer/flowplayer-3.2.8.min.js"  type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/layer/layer.js" type="text/javascript"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<!-- //fonts -->
</head>
  <body>
  <jsp:include page="header.jsp"></jsp:include>
<jsp:include page="menu.jsp"></jsp:include>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="show-top-grids">
				<div class="col-sm-12">
					<div class="song">
						<div class="video-grid col-sm-8">
							<div class="song-info">
								<h3 class="song-info-title">${thisvideo.name }</h3>	
							</div>
							<span href="${pageContext.request.contextPath }/${thisvideo.url}" style="display:block" id="player" class="play_video">  
							</span> 
							<input type="hidden" id="now-play-id" value="${thisvideo.id}">
						</div>
						<div class="song-grid-right col-sm-4">
							<div class="share">
								<h5>播单</h5>
								<ul class="play_video play_video_list_set">
								<c:forEach items="${videos }" var="video">
									<li>
										<div class="single-right-grids">
											<div class="col-md-4 single-right-grid-left">
												<a><img src="${pageContext.request.contextPath}/${video.thumbnailUrl}" alt="" /></a>
												<input type="hidden" class="single-list-id" value="${video.videoList.id}" />
												<input type="hidden" class="song-info-id" value="${video.id}">
											</div>
											<div class="col-md-8 single-right-grid-right">
												<a class="title">${video.name} </a>
												<p class="views">上传时间：<fmt:formatDate pattern="yyyy-MM-dd" value="${video.uploadTime}"/> </p>
												<p class="views">${video.videoClick} views</p>
											</div>
											<div class="clearfix"> </div>
										</div>
									</li>
									</c:forEach>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-8 single-left">
					<div class="all-comments">
						<div class="all-comments-info">
							<div class="">
								<a class="text-left column col-sm-6">All Comments</a>
								<a class="text-right column col-sm-6 song-info-click">${thisvideo.videoClick} views</a>
							</div>
							<div class="box" >
								<textarea placeholder="Message" required=""></textarea>
								<input type="submit" value="SEND" onclick="submit_comment(this)">
							</div>
						</div>
						<div class="media-grids">
								<c:forEach items="${commentPage.list }" var="comment">
									<div class="media">
										<div class="media-left">
											<img src="${pageContext.request.contextPath}/upload/head-icon/${comment.user.picUrl}" class="img-circle media-image-m center-block">
										</div>
										<div class="media-body">
											<p><strong class="text-primary">${comment.user.nickname }</strong><span class="media-body-detail"> ${comment.detail }</span></p>
											<br />
											<span class="media-body-detail-xx"><small><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${comment.commTime}"/></small></span>
											<span><a class="comment_reply" onclick="reply_open(this)">回复</a>&nbsp;&nbsp;<a class="tip_off" onclick="tip_off(this)">举报</a></span>
											<div class="box" style="display:none;">
												<input type="hidden" value="${comment.id}" />
												<input type="hidden" value="comment" />
												<textarea></textarea>
												<input type="submit" value="SEND" onclick="submit_reply(this)" />
											</div>
										</div>
									</div>
									<c:forEach items="${comment.replys }" var="reply">
										<div class="media media-children">
											<div class="media-left">
												<img src="${pageContext.request.contextPath}/upload/head-icon/${reply.user.picUrl}" class="img-circle media-image-children center-block">
											</div>
											<div class="media-body">
												<p><strong class="text-primary">${reply.user.nickname }</strong><span class="media-body-detail"> ${reply.detail }</span></p>
												<span class="media-body-detail-xx">
												<small><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${reply.replyTime}"/></small>
												&nbsp;&nbsp;<a class="tip_off" onclick="tip_off(this)">举报</a>
												</span>
												<span><input type="hidden" value="${reply.id}" /><input type="hidden" value="reply" /></span>
											</div>
										</div>
									</c:forEach>
								</c:forEach>
								<c:choose>
									<c:when test="${commentPage.list.size() != 0 }">
										<div class="col-md-12 text-center">
											<ul class="pagination pagination-sm">
											     <li><a style="cursor:pointer" onclick="page_comment(1)">首页</a></li>
											     <li><a style="cursor:pointer" onclick="page_comment(${commentPage.pageIndex>1?commentPage.pageIndex-1:1})">&laquo;</a></li>
											     <li><span class="pageIndex">${commentPage.pageIndex}/${commentPage.pageNumber}</span></li>
											     <li><a style="cursor:pointer" onclick="page_comment(${commentPage.pageIndex<commentPage.pageNumber?commentPage.pageIndex+1:commentPage.pageNumber})">&raquo;</a></li>
											     <li><a style="cursor:pointer" onclick="page_comment(${commentPage.pageNumber})">末页</a></li>
											</ul>
										</div>
									</c:when>
								</c:choose>
						</div>
					</div>
				</div>
				<div class="col-md-4 single-right">
					<h3>推荐观看</h3>
					<div class="single-grid-right">
						<c:forEach items="${rands }" var="rand">
							<div class="single-right-grids">
								<div class="col-md-4 single-right-grid-left">
									<a href="${pageContext.request.contextPath }/video/to_play_video/${rand.id}"><img src="${pageContext.request.contextPath}/${rand.thumbnailUrl}" alt="" /></a>
								</div>
								<div class="col-md-8 single-right-grid-right">
									<a href="${pageContext.request.contextPath }/video/to_play_video/${rand.id}" class="title">${rand.name}</a>
									<p class="author"><a href="#" class="author">${rand.user.nickname}</a></p>
									<p class="views">${rand.videoClick} views</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</c:forEach>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<jsp:include page="footer.jsp"></jsp:include>
		</div>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script>
		$(document).ready(function () {  
			active_play();
        }); 
		
		function active_play() {
			flowplayer("player", "${pageContext.request.contextPath}/videoplayer/flowplayer-3.2.8.swf", {
				clip: { 
	　　　　　　　　　 autoPlay: false,//自动播放    
	          		 autoBuffering:true //是否开启缓冲
		          }});
		};
		
		$('.single-right-grids').click(function(){
			$('.single-right-grids').each(function(){
				$(this).removeClass('background_click');
			});
			$(this).addClass('background_click');
			$.ajax({
	            url:"${pageContext.request.contextPath}/video/to_ajax_video",
	            type:"post",  //提交方式，post或get
		 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
	            	datatype:'json',
		 			data:{
		 					videoId: $(this).find('.song-info-id').val(),
		 				},  //提交的请求参数，是键值对，用：隔开
		 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
		 				$(".song-info-title").html(redata.name);
		 				$(".song-info-click").html(redata.videoClick + " views");
		 				$("#now-play-id").attr("value", redata.id);
		 				$("#player").attr("href", '${pageContext.request.contextPath}/'+redata.url);  //改变href的值，即改变播放视频的路径
		 				active_play();    //由于改变了href的值，因此需要重新激活播放器
		 			}
	        });
		});
		
		function page_comment(pageIndex) {
			$.post("${pageContext.request.contextPath}/comment/havelist", {pageIndex:pageIndex, listId:$('.single-list-id').val()},
	                function(result){
	                var $media_grids = $(".media-grids");
	                $media_grids.html("");
	                for(var i=0; i < result.list.length; i++){
	                	$media_grids.append("<div class='media'><div class='media-left'>"
	                			+ "<img src='${pageContext.request.contextPath}/upload/head-icon/"+ result.list[i].user.picUrl 
	                			+ "' class='img-circle media-image-m center-block'></div><div class='media-body'><p><strong class='text-primary'> " 
	                			+ result.list[i].user.nickname + "</strong><span class='media-body-detail'>" + result.list[i].detail
	                			+ "</span></p><br /><span class='media-body-detail-xx'><small>"
	                			+ result.list[i].formatTime + "</small></span><span><a class='comment_reply' onclick='reply_open(this)'>回复</a>&nbsp;&nbsp;<a class='tip_off' onclick='tip_off(this)'>举报</a></span>"
	                			+ "<div class='box' style='display:none;'><input type='hidden' value='" + result.list[i].id + "' /><input type='hidden' value='comment' /><textarea></textarea>"
	                			+ "<input type='submit' value='SEND' onclick='submit_reply(this)' /></div></div></div>");
	                		for(var ii=0; ii < result.list[i].replys.length; ii++) {
	                			$media_grids.append("<div class='media media-children'><div class='media-left'><img src='${pageContext.request.contextPath}/upload/head-icon/"
	                					+ result.list[i].replys[ii].user.picUrl +"' class='img-circle media-image-children center-block'></div>" 
	                					+ "<div class='media-body'><p><strong class='text-primary'>" + result.list[i].replys[ii].user.nickname
	                					+ "</strong><span class='media-body-detail'>" + result.list[i].replys[ii].detail + "</span></p>"
	                					+ "<span class='media-body-detail-xx'><small>"
	                					+ result.list[i].replys[ii].formatTime + "</small>&nbsp;&nbsp;<a class='tip_off' onclick='tip_off(this)'>举报</a></span>"
	                					+ "<span><input type='hidden' value=" + result.list[i].replys[ii].id + " /><input type='hidden' value='reply' /></span></div></div>");
								}};
			 		 $media_grids.append("<div class='col-md-12 text-center'><ul class='pagination pagination-sm'><li><a style='cursor:pointer' "
									+ "onclick='page_comment(1)'>首页</a></li><li><a style='cursor:pointer' onclick='page_comment("
									+ (result.pageIndex>1?result.pageIndex-1:1) + ")'>&laquo;</a></li><li><span class='pageIndex'>" 
									+ result.pageIndex + "/" + result.pageNumber + "</span></li><li><a style='cursor:pointer' onclick='page_comment("
									+ (result.pageIndex<result.pageNumber?result.pageIndex+1:result.pageNumber) + ")'>&raquo;</a></li><li><a style='cursor:pointer'"
									+ "onclick='page_comment(" + result.pageNumber + ")'>末页</a></li></ul></div>"); 
			},"json");
		}; 
		var confirm_area = false;
		function reply_open(e) {
			if(confirm_area == false) {
				$(e).parent().next().css('display', 'block');
				confirm_area = true;
			} else {
				$(e).parent().next().css('display', 'none');
				confirm_area = false;
			}
		}
		function submit_comment(e) {
			var detail = $(e).prev().val();
			$.ajax({
	            url:"${pageContext.request.contextPath}/comment/add",
	            type:"post",  //提交方式，post或get
		 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
	            	datatype:'text',
		 			data:{
		 				detail:detail,
		 				videoId: $('#now-play-id').val()
		 				},  //提交的请求参数，是键值对，用：隔开
		 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
		 				if(redata == "nologin") {
		 					layer.msg("请先登录，再进行留言", {icon: 2});
		 				} else if(redata == "success") {
							page_comment(1);
							$(e).prev().val("");
		 				}
		 			}
	        });
		};
		function submit_reply(e) {
			var detail = $(e).prev().val();
			var commId = $(e).prev().prev().prev().val();
		    $.ajax({
	            url:"${pageContext.request.contextPath}/reply/add",
	            type:"post",  //提交方式，post或get
		 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
	            	datatype:'text',
		 			data:{
		 				detail:detail,
		 				commId:commId
		 				},  //提交的请求参数，是键值对，用：隔开
		 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
						page_comment(1);
						$(e).prev().prev().val("");
		 			}
	        });
		};
		function tip_off(e) {
			var comm_id = $(e).parent().next().children().val();
			var type = $(e).parent().next().children().next().val();
			$.ajax({
	            url:"${pageContext.request.contextPath}/comment/tip_off",
	            type:"post",  //提交方式，post或get
		 		    async:true, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
	            	datatype:'json',
		 			data:{
		 				id : comm_id,
		 				type : type
		 				},  //提交的请求参数，是键值对，用：隔开
		 			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
		 				if (redata.login == "error") {
		 					layer.msg("请先登录，再进行信息举报", {icon: 2});
						} else if(redata.login == "success"){
							layer.msg(redata.msg, {icon: 1});
						}
		 			}
	        });
		};
		</script>
		
  </body>
</html>